<extend name="./public/frame.html"/>
<block name="content">
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/lang/zh-cn/zh-cn.js"></script>
    <form class="layui-form layui-form-pane1" action="" method="post">
        <input type="hidden" value="<?php echo $data['id'];?>" name="id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="type">
                        <volist name="btad_type" id="vo">
                            <option value="{$key}" <if condition="$data['type'] eq $key"> selected </if> >{$vo}</option>
                        </volist>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">目标页面</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="target" id="target">
                        <volist name="target" id="vo">
                            <option value="{$key}" <if condition="$data['target'] eq $key"> selected </if> >{$vo}</option>
                        </volist>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">广告名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required|title" required placeholder="请输入活动名称" autocomplete="off" class="layui-input" value="{$data.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">广告图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="img_url">
            <label class="layui-form-label"> </label>
            <div class="layui-input-block">
                <img src="{$data.img_url}" alt="" style="width: 300px;height: 400px">
                <input type="hidden" name="img_url" value="{$data.img_url}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">广告城市</label>
                <span><if condition="$data['region_id'] gt 0"> {$data.province_name}-{$data.city_name} </if></span>
                <div class="layui-inline">
                    <select name="province_id" id="province_id" class="layui-input" lay-filter="province" style="width: 120px;" onclick="getProvinceList();">
                        <option value="0" <if condition="$data['region_id'] eq 0"> selected </if>>全国</option>
                        <?php foreach($provinceList as $key=>$value):?>
                        <option value="<?php echo $value['region_id'];?>"><?php echo $value['region_name'];?></option>
                        <?php endforeach;?>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="city_id" id="city_id" class="layui-input" lay-filter="city_id" style="width: 120px;">
                        <option value="">请选择城市</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="is_show" id="">
                        <option value="1" <if condition="$data['is_show'] eq 1"> selected </if>>显示</option>
                        <option value="0" <if condition="$data['is_show'] eq 0"> selected </if>>不显示</option>
                    </select>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" min="1" name="sort" class="layui-input" value="{$data.sort}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">内容模式</label>
            <div class="layui-input-block">
                <input type="radio" name="content_mol" lay-filter="content_mol" value="1" title="URL跳转" <if condition="$data['content_mol'] eq 1"> checked </if>>
                <input type="radio" name="content_mol" lay-filter="content_mol" value="2" title="自有内容" <if condition="$data['content_mol'] eq 2"> checked </if>>
            </div>
        </div>
        <div class="layui-form-item" id="type_url" <if condition="$data['content_mol'] eq 2"> style="display: none" </if>>
            <label class="layui-form-label">内容URL</label>
            <div class="layui-input-block">
                <input type="text" name="content_url" class="layui-input" value="{$data.content_url}">
            </div>
        </div>
        <div class="layui-form-item" id="type_ziyou_address" <if condition="$data['content_mol'] eq 1"> style="display: none" </if>>
        <label class="layui-form-label">地址详情</label>
        <div class="layui-input-block">
            <input type="text" name="address" class="layui-input" placeholder="地址详情" value="{$data['address']}">
        </div>
        </div>
        <div class="layui-form-item" id="type_ziyou_location" <if condition="$data['content_mol'] eq 1"> style="display: none" </if>>
            <label class="layui-form-label">地址坐标</label>
            <a href="https://lbs.amap.com/console/show/picker" target="_blank" style="color: #0abfde;cursor: pointer">(拾取坐标系统)</a>
            <div class="layui-input-block">
                <input type="text" name="location" class="layui-input" placeholder="地址坐标(117.297001,31.804752)" value="{$data['location']}">
            </div>
        </div>
        <div class="layui-upload" id="type_ziyou_arr" <if condition="$data['content_mol'] eq 1"> style="display: none" </if>>
            <label class="layui-form-label">选择多文件</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>图片</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="demoList">
                        <volist name="data.img_arr" id="vo">
                        <tr id="upload<?php echo $key; ?>">
                            <td><a href="{$vo}" target="_blank">{$vo}</a></td>
                            <td><img src="{$vo}"></td>
                            <td></td>
                            <td>已上传<input type="hidden" name="img_arr[]" value="{$vo}"></td>
                            <td>
                                <button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>
                                <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="demo_delete({$key})" >删除</button>
                            </td>
                        </tr>
                        </volist>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

        <div class="layui-form-item" id="type_ziyou" <if condition="$data['content_mol'] eq 1"> style="display: none;margin-top: 30px;" </if>>
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <script name="content" id="editor" type="text/plain" style="width:960px;height:300px;">{$data['content']}</script>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button" id="submits">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['form', 'laydate', 'upload'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '{:url("upload")}' //上传接口
                , done: function (res) {
                    if (res.status == 1) {
                        $("#img_url").find('img').attr('src', res.data.file);
                        $("#img_url").find('input').val(res.data.file);
                        $("#img_url").show();
                        form.render();
                    }
                }
                , error: function (res1) {
                    console.log(res1);
                    //请求异常回调
                }
            });
            //墨绿主题
            laydate.render({
                elem: '#test6-1' //指定元素
                , type: 'datetime'
                , theme: 'molv'
                //,range: true
                , trigger: 'click'
            });

            laydate.render({
                elem: '#test6-2' //指定元素
                , type: 'datetime'
                , theme: 'molv'
                //,range: true
                , trigger: 'click'
            });

            form.on('checkbox', function (data) {
                var type = $(this).data('type');
                if (type == 'all') {
                    var child = $('.fa').find('.item_child');
                    child.each(function (index, item) {
                        item.checked = data.elem.checked;
                    });
                    form.render('checkbox');
                }
            });
            //监听提交
            $(document).on('click', '#submits', function () {
                $('form').submit();
            })
            form.on('radio(content_mol)', function(data){
                if(data.value == 1){
                    $("#type_url").show();
                    $("#type_ziyou").hide();
                    $("#type_ziyou_arr").hide();
                    $("#type_ziyou_location").hide();
                    $("#type_ziyou_address").hide();
                }else if(data.value == 2){
                    $("#type_url").hide();
                    $("#type_ziyou").show();
                    $("#type_ziyou_arr").show();
                    $("#type_ziyou_location").show();
                    $("#type_ziyou_address").show();
                }
            });
            form.on('select(province)', function(data){
                var province_id = data.value;
                if(province_id == 0){
                    $("#city_id").empty();
                    form.render('select');
                    return false;
                }
                $("#city_id").empty();
                $("#city_id").append('<option value=>请选择城市</option>');
                $.ajax({
                    url:'{:url("/admin/Franchisee/cityList")}',
                    async:true,
                    //dataType:'json',
                    type:'post',
                    data:{'province_id':province_id},
                    success:function(res){
                        $("#city_id").append(res);
                        form.render('select');
                    },
                    error:function(e){
                        layer.msg('请求错误');return false;
                    }
                })
            });
            //多文件列表示例
            var demoListView = $('#demoList')
                    ,uploadListIns = upload.render({
                        elem: '#testList'
                        ,url: '{:url("upload")}' //改成您自己的上传接口
                        ,accept: 'file'
                        ,multiple: true
                        ,auto: false
                        ,bindAction: '#testListAction'
                        ,choose: function(obj){
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function(index, file, result){
                                console.log(result);
                                var tr = $(['<tr id="upload-'+ index +'">'
                                    ,'<td>'+ file.name +'</td>'
                                    ,'<td><img src="'+result+'"/></td>'
                                    ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                                    ,'<td>等待上传</td>'
                                    ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    ,'</td>'
                                    ,'</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function(){
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function(){
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });
                                demoListView.append(tr);
                            });
                        }
                        ,done: function(res, index, upload){
                            if (res.status == 1) {
                                if(res.data.file){
                                    //上传成功
                                    var tr = demoListView.find('tr#upload-'+ index)
                                            ,tds = tr.children();
                                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span><input type="hidden" name="img_arr[]" value="'+res.data.file+'">');
                                    //tds.eq(3).html(''); //清空操作
                                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                                }
                            }

                            this.error(index, upload);
                        }
                        ,error: function(index, upload){
                            var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                    });
        });

        function demo_delete(index){
            var str='#upload'+index;
            $(str).remove();
        }
    </script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor',{
            zIndex : 0,// z轴
        });
    </script>
</block>
